<template>
    <div class="permission-management">
        <!-- 管理员表格 -->
        <el-table :data="admins" border style="width: 100%" :header-cell-style="{ background: '#f5f7fa' }">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="管理员名称" />
            <el-table-column prop="username" label="账号" />
            <el-table-column prop="password" label="密码">
                <template #default="{ row }">
                    <span>{{ row.password }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="220">
                <template #default="{ row }">
                    <el-button  @click="showEditDialog(row)" type="primary">设置权限</el-button>
                    <el-button  @click="deleteAdmin(row)" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <create-admin @add-admin="handleAddAdmin"></create-admin>

        <!-- 权限编辑对话框 -->
        <el-dialog v-model="editDialogVisible" title="权限设置" width="30%">
            <el-form label-width="120px">
                <el-form-item label="员工管理权限">
                    <el-checkbox v-model="currentPermissions.employeeManagement" />
                </el-form-item>
                <el-form-item label="店铺管理权限">
                    <el-checkbox v-model="currentPermissions.shopManagement" />
                </el-form-item>
                <el-form-item label="数据统计权限">
                    <el-checkbox v-model="currentPermissions.dataStatistics" />
                </el-form-item>
            </el-form>

            <template #footer>
                <el-button @click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="savePermissions">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import CreateAdmin from '@/components/CreateAdmin.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import instance from '@/api'
// 类型定义
interface Admin {
    id: number
    name: string
    is_super: number
    username: string
    password: string
    can_employee: boolean
    can_shop: boolean
    can_data: boolean
}

// 管理员数据
const admins = reactive<Admin[]>([])

// 权限编辑相关
const editDialogVisible = ref(false)
const currentAdminId = ref<number | null>(null)
const currentPermissions = reactive({
    employeeManagement: false,
    shopManagement: false,
    dataStatistics: false
})

// 显示权限编辑对话框
const showEditDialog = (admin: Admin) => {
    currentAdminId.value = admin.id
    currentPermissions.employeeManagement = admin.can_employee
    currentPermissions.shopManagement = admin.can_shop
    currentPermissions.dataStatistics = admin.can_data
    editDialogVisible.value = true
}

// 保存权限修改
const savePermissions = async () => {
    if (currentAdminId.value === 1) {
        ElMessage.warning('超级管理员不可修改')
        editDialogVisible.value = false
        return
    }
    const admin = admins.find(a => a.id === currentAdminId.value)
    if (admin) {
        admin.can_employee = currentPermissions.employeeManagement
        admin.can_shop = currentPermissions.shopManagement
        admin.can_data = currentPermissions.dataStatistics
        editDialogVisible.value = false
    }
    const request = {
        id: currentAdminId.value,
        can_employee: admin?.can_employee ? 1 : 0,
        can_shop: admin?.can_shop ? 1 : 0,
        can_data: admin?.can_data ? 1 : 0
    }
    const resp = await instance.put('/api/modify', request)
    if (resp.status === 200) ElMessage.success(resp.data)
}
const deleteAdmin = (admin: Admin) => {
    if(admin.id === 1){
        ElMessage.warning('禁止删除')
        return
    }
    ElMessageBox.confirm(
        '确定要删除吗',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const index = admins.findIndex(item => item.id === admin.id)
        admins.splice(index, 1)
        const resp = await instance.delete('/api/deleteAdmin', {params: {id : admin.id}})
        if(resp.status === 200) ElMessage.success(resp.data)
    }).catch(() => {})
}

const handleAddAdmin = (admin: Admin) => {
    admins.push(admin)
}
onMounted(async () => {
    const resp = await instance.get('/api/getAdminList')
    const { data } = resp
    data.forEach((item: any) => {
        item.can_employee = item.can_employee ? true : false
        item.can_shop = item.can_shop ? true : false
        item.can_data = item.can_data ? true : false
    })
    Object.assign(admins, data)
})

</script>

<style scoped>
.permission-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.permission-management {
    padding: 20px;
    background: #fff;
}
</style>